<!-- 本插件只是个框架,适用于地址数据要从后台逐级获取的需求 -->
<!-- 可对照注释根据业务需求更改 -->
<template>
	<view class="box">
		<!-- 选择地址模态框 -->
		<view class="dialog">
			<!-- 省份列表 -->
			<view class="addList">
				<view v-for="(item, index) in addressd1" :key="index" :class="{ check: item.id == co }" @tap="clickAddress(1, item.id, item.name)">{{ item.name }}</view>
			</view>
			<!-- 城市列表 -->
			<view class="addList">
				<view v-for="(item, index) in addressd2" :key="index" :class="{ check: item.id == ct }" @tap="clickAddress(2, item.id, item.name)">{{ item.name }}</view>
			</view>
			<!-- 地区列表 -->
			<view class="addList">
				<view v-for="(item, index) in addressd3" :key="index" :class="{ check: item.id == cs }" @tap="clickAddress(3, item.id, item.name)">{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>
<script>
var _self;
export default {
	data() {
		return {
			//模态框状态
			showFlag: false,
			// 省份列表
			addressd1: [],
			// 城市列表
			addressd2: [],
			// 地区列表
			addressd3: [],
			//省份id 默认为64，可根据想要默认展示的id自行更改
			co: '1',
			//默认省份名称
			coname: '北京',
			//城市id 默认为64，可根据想要默认展示的id自行更改
			ct: '64',
			//默认城市名称
			ctname: '朝阳区',
			//地区id 默认为575，可根据想要默认展示的id自行更改
			cs: '575',
			//默认地区名称
			csname: '三环以内'
		};
	},
	props: {
		//载入的标签数据
		addressd: Array
	},
	mounted() {
		_self = this;
		//默认获取省份列表
		this.getadd(1, 0);
		//默认获取城市列表
		this.getadd(2, this.co);
		//默认获取地区列表
		this.getadd(3, this.ct);
		// 声明默认地址,并传送给父组件
		this.emitData();
	},
	methods: {
		// 声明默认地址,并传送给父组件
		emitData() {
			var data = {
				province: _self.coname,
				city: _self.ctname,
				district: _self.csname
			};
			_self.$emit('changes', data);
		},
		// 模态框地址点击赋值并获取下一级
		// --flag--- 1(省份点击);2(城市点击);3(地区点击)；
		// --id----(点击的地址id);
		// --name--(点击的地址名称);
		clickAddress(flag, id, name) {
			//判断点击的状态
			switch (flag) {
				case 1:
					_self.coname = name;
					_self.co = id;
					_self.getadd(2, id);
					break;
				case 2:
					_self.ctname = name;
					_self.ct = id;
					_self.getadd(3, id);
					break;
				case 3:
					_self.csname = name;
					_self.cs = id;
					_self.emitData();
					_self.hideAddress();
					break;
				default:
					return;
			}
		},

		// 模拟获取数据,真实场景可参考上面demo
		getadd(flag, id) {
			switch (flag) {
				case 1:
					_self.addressd1 = addObj;
					break;
				case 2:
					var newArr = [];
					for (var i = 0; i < addObj.length; i++) {
						if (addObj[i].id == id) {
							newArr = addObj[i].city;
						}
					}
					_self.addressd2 = newArr;
					_self.ctname = newArr[0].name;
					_self.ct = newArr[0].id;
					_self.getadd(3, _self.ct);
					break;
				case 3:
					// 根据业务做相应处理
					break;
				default:
					return;
			}
		}
	}
};
var addObj = [
	{
		id: 1,
		code: '',
		name: '北京市',
		parent_id: 0,
		level: 1,
		path: '0,',
		city: [
			{
				id: 575,
				code: '',
				name: '三环以内',
				parent_id: 64,
				level: 3,
				path: '0,1,64,',
				cityy: [
					{
						id: 575,
						code: '',
						name: '三环以内',
						parent_id: 64,
						level: 3,
						path: '0,1,64,'
					},
					{
						id: 576,
						code: '',
						name: '三环到四环之间',
						parent_id: 64,
						level: 3,
						path: '0,1,64,'
					},
					{
						id: 577,
						code: '',
						name: '四环到五环之间',
						parent_id: 64,
						level: 3,
						path: '0,1,64,'
					},
					{
						id: 578,
						code: '',
						name: '五环到六环之间',
						parent_id: 64,
						level: 3,
						path: '0,1,64,'
					},
					{
						id: 579,
						code: '',
						name: '管庄',
						parent_id: 64,
						level: 3,
						path: '0,1,64,'
					}
				]
			},
			{
				id: 576,
				code: '',
				name: '三环到四环之间',
				parent_id: 64,
				level: 3,
				path: '0,1,64,'
			},
			{
				id: 577,
				code: '',
				name: '四环到五环之间',
				parent_id: 64,
				level: 3,
				path: '0,1,64,'
			},
			{
				id: 578,
				code: '',
				name: '五环到六环之间',
				parent_id: 64,
				level: 3,
				path: '0,1,64,'
			},
			{
				id: 579,
				code: '',
				name: '管庄',
				parent_id: 64,
				level: 3,
				path: '0,1,64,'
			}
		]
	},
	{
		id: 2,
		code: '',
		name: '上海',
		parent_id: 0,
		level: 1,
		path: '0,',
		city: [
			{
				id: 82,
				code: '',
				name: '黄浦区',
				parent_id: 2,
				level: 2,
				path: '0,2,'
			},
			{
				id: 83,
				code: '',
				name: '徐汇区',
				parent_id: 2,
				level: 2,
				path: '0,2,'
			},
			{
				id: 84,
				code: '',
				name: '长宁区',
				parent_id: 2,
				level: 2,
				path: '0,2,'
			},
			{
				id: 85,
				code: '',
				name: '静安区',
				parent_id: 2,
				level: 2,
				path: '0,2,'
			},
			{
				id: 86,
				code: '',
				name: '闸北区',
				parent_id: 2,
				level: 2,
				path: '0,2,'
			},
			{
				id: 87,
				code: '',
				name: '虹口区',
				parent_id: 2,
				level: 2,
				path: '0,2,'
			},
			{
				id: 88,
				code: '',
				name: '杨浦区',
				parent_id: 2,
				level: 2,
				path: '0,2,'
			},
			{
				id: 89,
				code: '',
				name: '宝山区',
				parent_id: 2,
				level: 2,
				path: '0,2,'
			}
		]
	},
	{
		id: 3,
		code: '',
		name: '天津',
		parent_id: 0,
		level: 1,
		path: '0,',
		city: [
			{
				id: 99,
				code: '',
				name: '东丽区',
				parent_id: 3,
				level: 2,
				path: '0,3,'
			},
			{
				id: 100,
				code: '',
				name: '和平区',
				parent_id: 3,
				level: 2,
				path: '0,3,'
			},
			{
				id: 101,
				code: '',
				name: '河北区',
				parent_id: 3,
				level: 2,
				path: '0,3,'
			},
			{
				id: 102,
				code: '',
				name: '河东区',
				parent_id: 3,
				level: 2,
				path: '0,3,'
			},
			{
				id: 103,
				code: '',
				name: '河西区',
				parent_id: 3,
				level: 2,
				path: '0,3,'
			}
		]
	}
];
</script>

<style>
.box{
		width: 100%;
		height: 100%;
}
.addList {
	height: 100%;
	box-sizing: border-box;
	overflow-y: scroll;
	width: 27%;
	float: left;
	text-align: center;
	font-size: 28upx;
	color:rgba(255,255,255,.5);
}

.addList view {
	height: 90upx;
	line-height: 90upx;
	/* border-bottom: 1upx solid rgba(255,255,255,.2); */
}
/* .addList view:nth-child(1){
	border-bottom: 1upx solid rgba(255,255,255,.2);
} */
.addList view:last-child{
	border-bottom: none;
}
.check {
	color: #FFE093;
    background:rgba(229,229,229,.4);
}

.jm-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1110;
	opacity: 0;
	outline: 0;
	text-align: center;
	-ms-transform: scale(1.185);
	transform: scale(1.185);
	backface-visibility: hidden;
	perspective: 2000upx;
	background: rgba(0, 0, 0, 0.6);
	transition: all 0.3s ease-in-out 0s;
	pointer-events: none;
}

.jm-modal::before {
	content: '\200B';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.show1 {
	opacity: 1;
	transition-duration: 0.3s;
	-ms-transform: scale(1);
	transform: scale(1);
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
}

.dialog {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 100%;
	height: 100%;
    background:rgba(229,229,229,.1);
	overflow: hidden;
}

.action {
	position: absolute;
	right: 30upx;
}

.content {
	position: absolute;
	text-align: center;
	width: calc(100% - 340upx);
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	height: 60upx;
	font-size: 32upx;
	line-height: 60upx;
	cursor: none;
	pointer-events: none;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.showBox {
	display: flex;
	position: relative;
	align-items: center;
	min-height: 100upx;
	justify-content: space-between;
}
</style>
